// 引用 lodash 工具中的 浅拷贝 函数
import { clone } from "lodash"
export const pageMixin = {

  data() {
    return {
      editModalShow: false, // 弹窗开关
      // 搜索表单内容占位
      pageApi: {
        list: null,// 获取列表方法
        del: null, // 删除方法
        add: null,  // 添加方法
        update: null, // 修改方法
        find: null  // 查询某一个方法
      },
      pageSearch: {

      },
      // 表格数据
      pageData: [],
      // 分页数据
      pageInfo: {
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示的数量
        pageSizeArr: [5, 10, 20, 50], // 数组元素为展示的选择每页显示个数的选项
        total: 0, // 总数据条数
        loading: false // 在表格等容器中加载数据时显示加载中
      },
      initFormData: {},  // 初始化数据占位
      formData: { // 真正使用的表单数据，此数据需要根据组件中的 initFormData 动态生成

      },
      rules: {}, // 表单验证规则
      aForm: null  // 弹窗 ref
    }
  },
  // created 生命周期函数，当组件实例被创建就发送数据请求
  created() {
    this.handlePageInit()
  },

  methods: {
    /**
      * 初始化
      */
    handlePageInit() {

      // 设置当前的页码为1
      this.pageInfo.currentPage = 1;
      // 设置当前数据总条数为 0 
      this.pageInfo.total = 0;
      // 调用获取数据方法
      this.handlePageLoad();

    },
    // 处理分页方法，每页数量改变时会触发
    handlePageSizeChange(size) {
      this.pageInfo.currentPage = 1;
      this.pageInfo.pageSize = size;
      this.pageInfo.total = 0;
      this.handlePageLoad();
    },
    // 处理分页方法，当前页改变时会触发
    handleCurrentChange(page) {
      this.pageInfo.currentPage = page;
      this.handlePageLoad();
    },
    handleResetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 进行表单验证，如果验证成功
    handleSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleSave(this.formData)
        } else {
          return false;
        }
      });
    },
    handleRemove(row) {
      // 显示二次确认提示框
      this.$confirm('此操作删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点确定会进入到此方法
        // 判断是否传入删除数据的接口
        if (!this.pageApi.del) {
          console.error("pageApi del 未正确配置")
          return;
        }
        // 根据id删除数据
        let res = await this.pageApi.del({ id: row.id })
        if (res.success) {
          this.$message({
            message: res.message,
            type: 'success',
          })
          this.handlePageInit();
        }
      }).catch(()=>{
        // 点取消进入到此方法
        Message({
          message: '取消删除',
          type: 'info',
        })
      })
    },
    /**
     * 获取列表
     */
    async handlePageLoad() {
      // 判断data节点中的pageApi中的list接口是否配置
      if (!this.pageApi.list) {
        console.error("未配置 pageApi.list")
        return
      }
      // 开启加载loading
      this.pageInfo.loading = true;
      // 发起网络请求
      let res = await this.pageApi.list({
        currentPage: this.pageInfo.currentPage,
        pageSize: this.pageInfo.pageSize,
        ...this.pageSearch  //将搜索框数据展开到此处一并发送到后端，如果没有搜索框数据则查询所有数据
      })
      // 请求成功将数据保存到data节点中的pageData属性中，并设置总条数
      if (res.success) {
        this.pageData = res.pageInfo.list;
        this.pageInfo.total = res.pageInfo.total;
      }
      // 关闭加载loading
      this.pageInfo.loading = false;
    },
    async handleOpenModal(_row = null) {
      // 如果 _row 被传入（即不为 null），表示用户希望编辑现有的数据。
      if (_row) {
        // 查找现有数据
        let row = _row;
        if (this.pageApi.find) {
          let res = await this.pageApi.find({ id: row.id })
          if (res.success) {
            row = res.entity;
          }
        }
        // 准备表单数据
        let obj = {};
        for (let key in this.initFormData) {
          if (row[key] != undefined) {
            obj[key] = clone(row[key]);
          }
        }
        if (row['id']) {
          obj['id'] = clone(row['id']);
        }
        this.formData = obj

      } else {
        // 如果没有传入 _row，表示创建新的数据，此时将 this.initFormData 克隆后赋值给 this.formData。
        this.formData = clone(this.initFormData);
      }
      this.editModalShow = true;
    },
    async handleSave(row) {
      let apifunc = this.pageApi.add;
      if (row.id) {
        apifunc = this.pageApi.update
      }
      if (!apifunc) {
        console.error("pageApi add update 未正确配置")
        return;
      }
      let res = await apifunc(row);
      if (res.success) {
        this.handlePageInit();
        this.editModalShow = false;
      }

    },
  }
}